<script setup>
import { ref, reactive, onMounted, nextTick, getCurrentInstance } from "vue";
import * as echarts from 'echarts';
// import "../assets/js/myDark.js"
import myDark from "../assets/json/myDark.json"

let chartRef = ref()
let myChart
const symbolSize = 20
const colors = ['#5470C6', '#91CC75', '#EE6666'];
// const data = 
let option = {
  // color: colors,
  title: {
    text: '潮流过程线图',
    left: 'center',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    right: '20%'
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['流向', '流速', '潮位'],
    bottom: '0',
  },
  xAxis: [
    {
      type: 'time',
      axisTick: {
        alignWithLabel: true
      },
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '流向(°)',
      position: 'right',
      axisLine: {
        show: true,
        lineStyle: {
          // color: colors[0]
        }
      },
    },
    {
      type: 'value',
      name: '流速(m/s)',
      position: 'right',
      offset: 80,
      axisLine: {
        show: true,
        lineStyle: {
          // color: colors[1]
        }
      },

    },
    {
      type: 'value',
      name: '潮位(m)',
      position: 'left',
      axisLine: {
        show: true,
        lineStyle: {
          // color: colors[2]
        }
      },
    }
  ],
  series: [
    {
      name: '流向',
      type: 'line',
      smooth: true,
      showSymbol: false,
      connectNulls: true,
      data: []
    },
    {
      name: '流速',
      type: 'line',
      smooth: true,
      yAxisIndex: 1,
      showSymbol: false,
      connectNulls: true,
      data: []
    },
    {
      name: '潮位',
      type: 'line',
      smooth: true,
      yAxisIndex: 2,
      showSymbol: false,
      connectNulls: true,
      data: []
    }
  ]
};
option.series[0].data = [
  [40, -10],
  [-30, -5],
  [-76.5, 20],
  [-63.5, 40],
  [-22.1, 50]
];
option.series[1].data = [
  [30, -1],
  [30, -15],
  [-26.5, 30],
  [-43.5, 40],
  [-52.1, 10]
];
let allData = []
allData.push(option.series[0].data, option.series[1].data)

setTimeout(function () {
  myChart.setOption({
    graphic: allData.map((el, i) => {
      return el.map(
        (item, dataIndex) => {
          return {
            type: 'circle',
            position: myChart.convertToPixel({ seriesIndex: i }, item),
            shape: {
              cx: 0,
              cy: 0,
              r: symbolSize / 2
            },
            // invisible: true,
            draggable: true,
            ondrag: function (dx, dy) {
              onPointDragging(dataIndex, [this.x, this.y], i);
            },
            z: 100
          };
        }
      )
    }).flat(1)
  });
}, 0);
function onPointDragging(dataIndex, pos, i) {
  option.series[i].data[dataIndex] = myChart.convertFromPixel({ seriesIndex: i }, pos);
  myChart.setOption({
    series: [
      {
        name: option.series[i].name,
        data: option.series[i].data,
      }
    ]
  });
}
onMounted(() => {
  echarts.registerTheme("myDark", myDark)
  myChart = echarts.init(chartRef.value, "myDark");
  myChart.setOption(option);
  let a = [[1, 20], [2, 30]]
  let b = [[1, 50], [2, 90]]
  let c = [a, b]
  let d = c.map((el, idx) => {
    return el.map((item, index) => {
      return {
        x: item[0],
        y: item[1],
        i: idx
      }
    })
  }).flat(1)
  console.log(d);
}
);
</script>

<template>
  <div id="chart" ref="chartRef" style="height: 500px; width: 1200px;">
  </div>
</template>

<style lang="less" scoped>

</style>